<!--  -->
<template>
  <el-container>
    <el-header>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
      >
        <el-menu-item @click="isShow = true" index="1">视频</el-menu-item>
        <el-menu-item @click="isShow = !isShow" index="2">MV</el-menu-item>
      </el-menu>
    </el-header>

    <el-main>
      <AllVideo v-if="isShow" :tags="tags"></AllVideo>
      <Mv v-else></Mv>
    </el-main>
  </el-container>
</template>

<script>
import { getVideoTag } from "util/video.js";
import Mv from "./Mv.vue";
import AllVideo from "./AllVideo.vue";
import { mapGetters } from 'vuex'

export default {
  name: "",
  components: { AllVideo, Mv },
  data() {
    return {
      activeIndex: "1",
      tags: [],
      isShow:true
    };
  },
  computed: {
    ...mapGetters('userInfo', ['loginStatus'])
  },
  created() {
    this.getVideoTag();
  },
    watch: {
    loginStatus() {
      this.getVideoTag()
    }
  },
  methods: {
    async getVideoTag() {
      let {
        data: { data },
      } = await getVideoTag();
      this.tags = data;
      // console.log(data);
    },
  },
};
</script>

<style lang='less' scoped>
.el-header {
  margin-top: 10px;
  .el-menu-demo {
  // width: 100%;
  border-radius: 20px;
  border-bottom: none;
  width: 260px;
  display: flex;
  justify-content: space-evenly;
  /deep/.el-menu-item {
    flex: 1;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 10px;
    border-bottom: none;
    border-radius: 10px;
    color: rgb(83, 81, 81);
    font-size: 17px;
    font-weight: 600;
  }
  /deep/.el-menu-item:hover {
    background-color: rgba(184, 178, 178, 0.918);
    color: #fff;
  }
  /deep/.el-menu-item:focus,
  /deep/.el-menu-item.is-active {
    border-bottom: none;
    background-color: #F6F6F8;
  }
}
}
.el-main {
  padding: 20px 20px;
}
</style>